<script setup lang="ts">
import type { personalImgItem } from '@/types/home'
import { ref } from 'vue'

const activeIndex = ref(0)

// 当下标改变时候触发
const onChange: UniHelper.SwiperOnChange = (ev) => {
  activeIndex.value = ev.detail.current
}
// 定义 props 接收
defineProps<{
  list: personalImgItem[]
}>()
</script>

<template>
  <view class="relative h-full overflow-hidden translate-y-0 bg-[#efefef]">
    <swiper
      class="flex-1 h-full"
      :circular="true"
      :autoplay="true"
      :interval="3000"
      @change="onChange"
    >
      <swiper-item v-for="item in list" :key="item.id">
        <navigator url="/pages/index/index" hover-class="none" class="w-full h-full">
          <image mode="aspectFill" class="w-full h-full" :src="item.imgUrl"></image>
        </navigator>
      </swiper-item>
    </swiper>
    <!-- 指示点 -->
    <view class="absolute left-0 right-0 bottom-[16rpx] flex justify-center">
      <text
        v-for="(item, index) in list"
        :key="item.id"
        class="w-[30rpx] h-[6rpx] mx-[8rpx] rounded-[6rpx]"
        :style="{
          backgroundColor: index === activeIndex ? '#ffffff' : 'rgba(255,255,255,0.4)',
        }"
      ></text>
    </view>
  </view>
</template>
